<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="/static/css/pintuer.css">
    <link rel="stylesheet" href="/static/css/admin.css">
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/pintuer.js"></script>

    <style>
        .updates {
            position: fixed; /* 使其悬浮在页面上 */
            top: 10%; /* 从顶部开始，可以根据需要调整 */
            left: 10%; /* 从左侧开始，可以根据需要调整 */
            width: 80%; /* 占据整体窗口的80%宽度 */
            height: 80%; /* 占据整体窗口的80%高度，但通常你可能需要设置max-height来避免过大 */
            background-color: rgba(255, 255, 255, 0.8); /* 白色背景，80%透明度 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 阴影效果 */
            padding: 20px; /* 内部填充 */
            overflow: auto; /* 如果内容过多，允许滚动 */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 999; /* 确保它在其他元素之上 */
            border-radius: 10px; /* 可选圆角 */
            backdrop-filter: blur(10px); /* 可选模糊效果 */
        }

    </style>
</head>
<body>
<form method="post" action="" id="listform">
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 班级列表</strong>
            <a href="" style="float:right; display:none;">添加字段</a>
        </div>
        <table id="class_list" class="table table-hover text-center">
           <thead>
                <tr class="t_head">
                    <th width="100" style="text-align:left; padding-left:20px;">ID</th>
                    <th width="10%">班级名称</th>
                    <th>班主任</th>
                    <th>备注</th>
                </tr>
           </thead>

            <tbody class="t-body">

            </tbody>

            <tbody class="t-body">
            </tbody>
        </table>
    </div>
</form>



<div class="panel admin-panel updates" style="display: none;">
    <span style=" width: 30px; height: 30px; top: 0; right: 0; position: fixed;" class="cancel" onclick="cancel()">
        <i class="icon-times" style="width: 30px; height: 30px;  font-size: 28px;" ></i>
    </span>
    <div class="panel-head"><strong><span class="icon-pencil-square-o"></span>修改班级信息</strong></div>
    <div class="body-content">
        <form class="form-clazz" action="">
            <div class="form-group">
                <div class="label">
                    <input type="text" name="cid" id="cid" value="" hidden/>
                    <label>班级名称：</label>
                </div>
                <div class="field">
                    <input type="text" class="input" name="cname" id="cname" value="" style="width:100%; height: 30px;"/>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>班主任：</label>
                </div>
                <div class="field">
                    <input type="text" class="input" name="cteacher" id="cteacher" value="" style="width:100%; height: 30px;"/>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>备注：</label>
                </div>
                <div class="field">
                    <textarea type="text" class="input" name="remark" id="remark" style="height:80px;"></textarea>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button id="btn" class="button bg-main icon-check-square-o" type="button" onclick="return updateSubmit()"> 提交</button>
                    <button id="reset" class="button bg-dot icon-info" type="reset"> 重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    let clazzList = []
    $(function () {
        //发送异步 获取page
        let uri = location.search;
        uri = uri.substring(1);
        //console.log(uri);
        let data = uri.split("=");
        let page = data[1];
        if (typeof page == 'undefined') {
            page = 1;
        }
        //console.log(page);
        //loadListClazz(page)
        loadListClazz()


    })

    function loadListClazz() {
        $.ajax({
            url: "/clazz/list",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data)
                clazzList = data.data
                let arr = data.data
                let str = '';
                for (let i = 0; i < arr.length; i++) {
                    str += `
                    <tr>
                        <td style="text-align:left; padding-left:20px;">${arr[i].cid}</td>
                        <td>${arr[i].cname}</td>
                        <td>${arr[i].cteacher}</td>
                        <td>${arr[i].remark}</td>
                        <td>
                            <div class="button-group">
                                <a class="button border-main renew" onclick="return update(${arr[i].cid})"><span class="icon-edit"></span> 修改</a>
                                <a class="button border-red" href="javascript:void(0)" onclick="return del(${arr[i].cid})">
                                   <span class="icon-trash-o"></span> 删除</a>
                             </div>
                        </td>
                    </tr>`;
                }
                $(".t-body").html(str);
            }
        })
    }




    //搜索
    function changesearch() {

    }

    function cancel() {
        $('.updates').hide()
    }

    let curClazz = {}
    // 单个修改
    function update(id) {
        $('.updates').show() // 展示页面

        // 获取到要修改的对象
        curClazz = clazzList.find(function (item) {
            if (item.cid === id) return item
        })


        // 将值赋予到修改表单中
        $('#cname').val(curClazz['cname'])
        $('#cteacher').val(curClazz['cteacher'])
        $('#remark').val(curClazz['remark'])

    }

    function updateSubmit() {
        $.ajax({
            url: '/clazz/update',
            type: 'POST',
            data: {
                cid: curClazz['cid'],
                cname: $('#cname').val(),
                cteacher: $('#cteacher').val(),
                remark: $('#remark').val()
            },
            dataType: 'JSON',
            success: function (data) {
                if (data.code === 200) {
                    console.log('更新成功')
                    $('.updates').hide()
                    location.reload()
                }
            }
        })
    }



    //单个删除
    function del(cid) {
        if (confirm("您确定要删除吗?")) {
            $.ajax({
                url: "/clazz/delete",
                data: {
                    cid:cid
                },
                type: "POST",
                dataType: "json",
                success: function (res) {
                    console.log(res)
                    alert("删除成功");
                    location.reload();
                }
            })
        }
    }



</script>
</body>
</html>